<!--
 * @Descripttion: 用户手册管理
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-10-21 13:33:50
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-04 17:48:40
-->
<template>
  <div class="handbooks">
    <el-row class="handbooks-box">
      <div class="title">
        已上传文件：
      </div>
      <el-table
        :data="list"
        border
        :header-cell-style="{background: '#f5f7fa'}"
        style="width: 100%">
        <el-table-column
          prop="submittedFileName"
          label="名称">
        </el-table-column>
        <el-table-column label="管理">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="download(scope.row)">
            <i class="el-icon-download"></i>
            下载
          </el-button>
          <el-button type="danger" size="mini" @click="deleteItem(scope.row)">
            <i class="el-icon-delete"></i>
            删除
          </el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-row>
    <el-row class="upload-box" v-if="list.length<5">
      <div class="title">
        上传文件：
      </div>
      <el-upload
        :action="fileUrl"
        :data="{ fileType: 10 }"
        :headers="fileHeaders"
        :limit="1"
        accept=".doc,.docx,.pdf,.xlsx"
        :show-file-list="false"
        :file-list="fileList"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarError"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__text">最多能上传5个文件</div>
        <!-- <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div> -->
      </el-upload>
    </el-row>
  </div>
</template>

<script>
import fileUpdata from "@/api/file.config";
import { deleteFile } from "@/api/common.api"
import { queryFileListByType } from '@/api/admin.api'
export default {
  data() {
    return {
      fileHeaders: fileUpdata.headers(),
      fileUrl: fileUpdata.url,
      fileList: [],
      list: []
    };
  },
  mounted(){
    this.getData()
  },
  methods: {
    // 上传成功
    handleAvatarSuccess(res) {
      if (res&&res.code===0) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.fileList = []
        this.getData()
      }
    },
    //  上传失败
    handleAvatarError(err) {
        this.$message({
          message: '上传失败',
          type: 'warning'
        })
    },
    // 下载
    download(item){
      window.open(item.url)
    },
    // 查询列表
    getData(){
      queryFileListByType(10).then(res=>{
        this.list = res
      })
    },
    // 删除
    deleteItem(item){
      this.$confirm('确定删除文件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile(10,item.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        })

      });
    }
  },
};
</script>

<style scoped lang='scss'>
.handbooks {
  .title{
    margin: 10px 0;
    // font-weight: bold;
    text-align: left;
  }
  .upload-box{
    margin-top: 30px;
    text-align: center;
  }
}
</style>
